iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0

banner05

改完首頁樣式之後,就會開始想把 header 調整成自己想要的樣子了,
看了 官方文件 就會知道,
如果我們要調整 header 的內容,我們需要打開 docs/.vitepress/config.mts (之後都簡稱 config ) 這支檔案,

import { defineConfig } from 'vitepress';

// https://vitepress.dev/reference/site-config
export default defineConfig({
    title: 'Opsehell\'s Blog',
    description: 'Opsehll\'s work and life records',
    themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
        nav: [
            { text: 'Home', link: '/' },
            { text: 'Examples', link: '/markdown-examples' }
        ],

        sidebar: [
            {
                text: 'Examples',
                items: [
                    { text: 'Markdown Examples', link: '/markdown-examples' },
                    { text: 'Runtime API Examples', link: '/api-examples' }
                ]
            }
        ],

        socialLinks: [
            { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
        ]
    }
});

我們今天主要要設定的是 themeConfig 的部分,下面的程式區塊會聚焦在這裡。

Nav標題 與 Logo

先來添加預設頁面標題和 Logo 吧:

export default defineConfig({
    themeConfig: {
        siteTitle: 'Opshell\'s Blog',
        logo: {
            light: '/logo.jpg',
            dark: '/logo-w.jpg',
            alt: 'Opshell Logo'
        }
    }
});

Logo 旁邊的網站標題文字,預設是從 config.title 抓取,也就是上面 defineConfig 裡的 title
如果想要使用其他的文字,可以設定在 siteTitle,如果不想顯示任何文字,則可以把 siteTitle 設定為 false

自帶黑夜模式是 vitepress 的其中一個加分項,
而黑與白模式的 Logo 可以分別設定,當然 你可以像下面這樣設定同一個:

export default defineConfig({
    themeConfig: {
        logo: '/logo.jpg'
    }
});

rewrites (路由重寫)

要開始設定文章連結前,Ops 想到,預設的 md 存放位置是 /docs/ ,目前我們有的文章數量不多所以沒差,
但是當文章數量越來越多且專案越玩越花的時候,我們是必須要使用多層資料夾做管理,
於是新建了一個資料夾專門放 md 命名為 pages ,各位可以自行決定名稱 viewmarkdownarticle 也都可以,只要自己習慣就好。

然後在 congfig 裡加入這個設定:

export default defineConfig({
    rewrites: {
        'pages/(.*)': '(.*)'
    }
});

rewrites 這個設定是寫在 defineConfig({}) 下面,而不是在themeConfig裡面喔。

這樣的話, vitepress 會把就會知道 /pages/about-opshell.md 改寫成 /about-opshell 來做生成,這樣的情況下在之後有需要連結到地方也記得要把 /pages 拿掉喔~。
關於 rewrites 屬性還有更多複雜的用法可以用,例如動態路由,Opshell 這邊沒用到,就不展開來講了,有需要的看官請參考官方文件-路由重寫

目前目錄結構差不多長這樣(只要沒有副檔名,就是目錄):

.
├─ docs
│  ├─ .vitepress
│  │  ├─ theme
│  │  │  ├─ index.ts
│  │  │  └─ style.css
│  │  └─ config.mts
│  └─ pages
│     ├─ article
│     │  ├─ code-sea
│     │  │  ├─ typescript
│     │  │  └─ vitepress
│     │  └─ life-murmurs
│     ├─ index.md
│     └─ about-opshell.md
├─ node_modules
└─ package.json

也就是說,如果我要連一個站內連結,會從原先的 /pages/about-opshell 寫成 /about-opshell 喔。

nav (選單)

加入 About Ops 和 相關的目錄文章連結吧~

export default defineConfig({
    themeConfig: {
        nav: [
            {
                text: '✨️ Vitepress Thirty Day',
                link: '/vitepress-thirty-day'
            },
            {
                text: 'Article',
                items: [
                    {
                        text: 'Life\'s Mumurs',
                        link: '/article/life-mumurs/life'
                    },
                    {
                        text: 'Code Sea',
                        items: [
                            {
                                text: 'typescript',
                                link: '/article/code-sea/typescript/day-1'
                            },
                            {
                                text: 'vitepress',
                                link: '/article/code-sea/vitepress/day-1'
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

記得要建立目錄和檔案。

About Ops 是連結,如果帶的是 items as NavItem[] 則會變成下拉選單,再繼續包的話則會變成下拉選單裡面有群組,
NavItem 這個型別是這樣定義的:

type NavItem = NavItemWithLink | NavItemWithChildren;

interface NavItemWithLink {
  text: string
  link: string
  activeMatch?: string
  target?: string
  rel?: string
  noIcon?: boolean
}

interface NavItemChildren {
  text?: string
  items: NavItemWithLink[]
}

interface NavItemWithChildren {
  text?: string
  items: (NavItemChildren | NavItemWithLink)[]
  activeMatch?: string
}

也就是說,itemslink 兩個屬性只能擇一,要馬是連結,要馬是群組。
可以到 官方文件 看更多 nav 設定的用法。

今天就先到這邊吧,感謝各位的觀看,各位晚安。


上一篇
[Day04] - 一切都是從 vitepress init 開始的
下一篇
[Day06] - Base Config Part 2
系列文
30天用Vitepress 開啟我的"部落客"生活30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言